<template>
	<view class="main">
		<view class="" v-if="rwlist.length !=0">
			<view class="box box-align-center box-pack-start bgcfff mb20 padd10" v-for="(item,index) in rwlist"
				:key="index" @click="goDetail(item)">
				<u-avatar :src="item.image" mode="square" size="160"></u-avatar>
				<view class="box box-tb box-align-start box-align-center ml10 content">
					<view class="title posr">
						<view class="text">
							{{item.title}}
						</view>
						<view class="tips" v-if="item.wpy !=0">
							未批阅 +{{item.wpy}}
						</view>
					</view>
<!-- 					<view class="limit-time mt10">
						任务期限：{{item.endTime}}
					</view> -->
					<view class="progress box box-align-center">
						<u-slider v-model="item.wcl" min="0" max="100" disabled active-color="#626BF1"
							inactive-color="#F3F4FB" block-width="26" height="10" block-color="#626BF1" class="sliders">
						</u-slider>
						<!-- <u-line-progress :percentage="item.wcl" height="8" activeColor="#626BF1" inactiveColor="#F3F4FB" /> -->
						<view class="ml10 percent box box-align-center">
							<view class="cnt">{{item.wcs}}</view>/{{item.bjrs}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<no-data title="暂无实践任务" v-else></no-data>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				bj: uni.getStorageSync('clazz'),
				user: uni.getStorageSync("user"),
				plan: {},
				rwlist: [],
				value: 30,
			}
		},
		onShow() {
			this.classLdsjList()
		},
		onLoad() {},
		methods: {
			classLdsjList() {
				let opts = {
					url: '/yclassldsjtask/classLdsjList',
					method: 'post'
				};
				let params = {
					schoolid: this.user.schoolId,
					trid: this.user.id,
					classid: this.bj.id
				};
				//console.log(params);
				this.$api.post(opts, params).then(res => {
					//console.log(res);
					this.rwlist = res.list;
				})
			},
			goDetail(item) {
				//console.log(item);
				uni.navigateTo({
					url: '/pageHome/sjDetail?id=' + item.id + '&planid=' + item.sjlistid + '&classid=' + this.bj.id
				})
			}

		}
	}
</script>

<style scoped lang="scss">
	.main {
		width: 100%;
		height: 100%;
	}

	.bgcfff {
		background-color: #fff;
		box-sizing: border-box;
	}

	.posr {
		position: relative;
		font-size: 32rpx;
		font-weight: 600;

		.tips {
			position: absolute;
			top: -21rpx;
			right: -142rpx;
			width: 140rpx;
			height: 40rpx;
			line-height: 40rpx;
			background: #FF5A77;
			border-radius: 26rpx;
			font-size: 20rpx;
			text-align: center;
			color: #fff;
		}
	}

	.text {
		width: 350rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.limit-time {
		color: #5F6572;
		font-size: 22rpx;
	}

	.progress {
		margin-top: 20rpx;
		width: 80%;
	}

	.sliders {
		width: 80%;
	}
	
	/deep/ .u-slider__button {
		display: none;
	}

	.content {
		width: 500rpx;
	}

	.percent {
		font-size: 25rpx;
	}

	.cnt {
		color: #7686F6;
	}
</style>
